﻿<!DOCTYPE html>
<html>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		* {
			background: none repeat scroll 0 0 transparent;
			border: 0 none;
			margin: 0;
			padding: 0;
			vertical-align: baseline;
			font-family: 微软雅黑;
			overflow: hidden;
		}
		
		#navi {
			width: 100%;
			position: relative;
			word-wrap: break-word;
			border-bottom: 1px solid #065FB9;
			margin: 0;
			padding: 0;
			height: 40px;
			line-height: 40px;
			vertical-align: middle;
			background-image: -moz-linear-gradient(top, #EBEBEB, #BFBFBF);
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB), color-stop(1, #BFBFBF));
		}
		
		#naviDiv {
			font-size: 14px;
			color: #333;
			padding-left: 10px;
		}
		
		#tips {
			margin-top: 10px;
			width: 100%;
			height: 40px;
		}
		
		#buttonGroup {
			padding-left: 10px;
			float: left;
			height: 35px;
		}
		
		.button {
			float: left;
			margin-right: 10px;
			padding-left: 10px;
			padding-right: 10px;
			font-size: 14px;
			width: 70px;
			height: 30px;
			line-height: 30px;
			vertical-align: middle;
			text-align: center;
			cursor: pointer;
			border-color: #77D1F6;
			border-width: 1px;
			border-style: solid;
			border-radius: 6px 6px;
			-moz-box-shadow: 2px 2px 4px #282828;
			-webkit-box-shadow: 2px 2px 4px #282828;
			background-image: -moz-linear-gradient(top, #EBEBEB, #BFBFBF);
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB), color-stop(1, #BFBFBF));
		}
		
		#mainContainer {
			padding-left: 10px;
			padding-right: 10px;
			text-align: center;
			width: 98%;
			font-size: 12px;
		}
	</style>

	<body>
		<div id="navi">
			<div id='naviDiv'>
				<span><img src="images/arror.gif" width="7" height="11" border="0" alt=""></span><span>&nbsp;用户管理</span>&nbsp;
				<span><img src="images/arror.gif" width="7" height="11" border="0" alt=""></span><span>&nbsp;用户列表</span>&nbsp;
			</div>
		</div>
		<div id="tips">
			<div id="buttonGroup">
				<div class="button" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.fontWeight='bold'">
					<a>添加用户</a>
				</div>
				<!--<div class="button" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.fontWeight='bold'">
			<a>查找用户</a>
		</div>-->
			</div>
		</div>
		<div id="mainContainer">
			<table class="default" width="100%">
				<col width="20%">
				<col width="20%">
				<col width="40%">
				<col width="20%">
				<tr class="title">
					<td>序号</td>
					<td>用户姓名</td>
					<td>身份证号</td>
					<td>操作</td>
				</tr>
				<tr class="list" v-for="item in list">
					<td>{{$index+1}}</td>
					<td>张三</td>
					<td>1202011999090920805056</td>
					<td><a href="#">删除</a></td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var APP_ID = 'hN1kSQf2DQ9awcJmwEmIIdVo-gzGzoHsz';
			var APP_KEY = 'aHCVjhhcyeerTEsKObkGSyd6';
			AV.init({
				appId: APP_ID,
				appKey: APP_KEY
			});
			var query = new AV.Query('user_info');
			query.find().then(function(results) {
				for (var i = 0; i < results.length; i++) {
					obj = {
						email: results[i].email,
						Password: results[i].attributes.Password,
						idCard: results[i].attributes.idCard,
						phoneNumber: results[i].attributes.phoneNumber,
						userName: results[i].attributes.userName,
						createdAt: results[i].attributes.createdAt
					}
					vue.list.push(obj)
				}
				// 如果这样写，第二个条件将覆盖第一个条件，查询只会返回 priority = 1 的结果
			}, function(error) {});
		}
		var vue = new Vue({
				el: "body",
				data: {
					list: []
				},
				methods: {
					remove: function(index) {
						console.log(index.item);
						var todo = AV.Object.createWithoutData('bike_info', index.item.id);
						todo.destroy().then(function(success) {
							// 删除成功
							alert("删除成功")
						}, function(error) {
							// 删除失败
						});
					}
				}
			})
			//添加车辆开始
		$("#addBike").click(function() {
			$(".bikeAdd").attr("style", "display: block;")
		})
		$("#sure").click(function() {
				var bikeNumber = $("#bikeNumber").val();
				console.log(bikeNumber)
					// 声明类型
				var User_info = AV.Object.extend('bike_info');
				// 新建对象
				var User_info = new User_info();
				// 设置车辆号
				User_info.set('bikeId', bikeNumber);
				// 设置租车状态
				User_info.set('bikeState', "未使用");
				// 设置支付状态
				User_info.set('payOr', "初始化");
				// 设置累计金额
				User_info.set('payCount', "0");
				User_info.save().then(function(todo) {
					alert('添加成功！');
					$(".bikeAdd").attr("style", "display: none;")
				}, function(error) {
					alert('添加失败');
				});
			})
			//添加车辆结束
	</script>

</html>